<script setup>
// import { onBeforeMount, reactive } from "vue";
// import Top from "@/components/Top.vue"
import { first } from 'lodash';
import { onBeforeMount, onMounted, reactive,ref } from 'vue'
import AccountService from "@/stores/AccountService"
import { ElMessage } from 'element-plus/es';

const isLogin = ref(false)
//不要用let，用let会导致页面刷新数据消失
const account = ref([])

//检查是否登录
const checkIsLogin = async () =>{
    let data = JSON.parse(sessionStorage.getItem('loginAccount'))
    if(data != null){
        isLogin.value = true
        //通过用户名获取用户信息
        // console.log(data)
        // console.log(data.username)
       await getAccount(data.username)
    }else{
        isLogin.value = false
    }
}

const getAccount = async (name) =>{
    const [err, res] = await AccountService.promise_process(AccountService.getAccountByName(name));
    if(err){
    console.log(err)
    ElMessage({
          message: '请求服务器失败',
          type: 'error',
        })
  }
  if(res){
    console.log(res)
    if(res.code == 0){
      // console.log(res.data)
      account.value = res.data
      // alert(account.value.username)
    }
    }
}

//检查修改前是否登录
onBeforeMount(() => {
    checkIsLogin()
})

const accountForm = reactive({
  oldPwd  : '',
  newPwd  : '',
  newPwd2 : ''
})

//设置原始切换按钮的值
const showEditCard = ref(false)
const showResetPwd = ref(false)

// 点击修改按钮时切换 showEditCard 的值
const toggleEditCard1 = () => {
  if(!showResetPwd.value){
    showEditCard.value = !showEditCard.value
  }else{
    showResetPwd.value = !showResetPwd.value
    showEditCard.value = !showEditCard.value
  }
}

const toggleEditCard2 = () => {
  if(!showEditCard.value){
    showResetPwd.value = !showResetPwd.value
  }else{
    showEditCard.value = !showEditCard.value
    showResetPwd.value = !showResetPwd.value
  }
}

const modifyPassword = async (accountForm)=>{
  const t_account = reactive({
    username: account.value.username,
    password: accountForm.oldPwd,
  })
  const [err, res] = await AccountService.promise_process(AccountService.login(t_account));
  if(err){
    console.log(err)
    ElMessage({
      message: '请求服务器失败',
      type: 'error',
    })
  }
  if(res){
    console.log(res)
    if(res.code == 1){
      ElMessage({
        showClose: true,
        message: '原始密码有误',
        type: 'error',
      })
    }else{
      // alert(JSON.stringify(account))
      account.value.password = accountForm.newPwd
      await updateAccount(account.value.username,account.value)
      ElMessage({
        showClose: true,
        message: '修改密码成功!',
        type: 'success',
      })
    }
  }
}

const updateAccount = async (username,account)=>{
  // alert(JSON.stringify(account))
  const [err, res] = await AccountService.promise_process(AccountService.editAccount(username,account));
  if(err){
    console.log(err)
    ElMessage({
      message: '请求服务器失败',
      type: 'error',
    })
  }
  if(res){
    console.log(res)
    alert("Success!")
  }
}

</script>

<template>
<top />
<div class="card-container">
  <el-row gutter="20">
    <el-col span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>{{account.username}}的账户</span>
            <el-button type="primary" round @click="toggleEditCard1">完善账户</el-button>
            <el-button type="primary" round @click="toggleEditCard2">修改密码</el-button>
          </div>
        </template>
        <el-form :model="account" label-width="100px" disabled>
            <el-form-item label="电话">
              <el-input v-model="account.phone" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="account.email" />
            </el-form-item>
            <el-form-item label="姓">
              <el-input v-model="account.firstName" />
            </el-form-item>
            <el-form-item label="名">
              <el-input v-model="account.lastName" />
            </el-form-item>
            <el-form-item label="地址1">
              <el-input v-model="account.address1" />
            </el-form-item>
            <el-form-item label="地址2">
              <el-input v-model="account.address2" />
            </el-form-item>
            <el-form-item label="国家">
              <el-input v-model="account.country" />
            </el-form-item>
          </el-form>
      </el-card>
    </el-col>
    <el-col span="8">
      <transition name="fade">
        <el-card v-if="showResetPwd" class="box-card edit-card">
          <template #header>
            <div class="card-header">
              <span>修改账户密码</span>
              <el-button type="primary" round @click="modifyPassword(accountForm)">提交</el-button>
            </div>
          </template>
          <el-form :model="accountForm" label-width="100px" >
          <el-form-item label="旧密码">
            <el-input v-model="accountForm.oldPwd"
                type="password"
                placeholder="请输入您的旧密码"
                show-password/>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="accountForm.newPwd"
                type="password"
                placeholder="请输入您的新密码"
                show-password/>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="accountForm.newPwd2"
                type="password"
                placeholder="请重新输入您的新密码"
                show-password />
          </el-form-item>
        </el-form>
        </el-card>
      </transition>
    </el-col>
    <el-col span="8">
      <transition name="fade">
        <el-card v-if="showEditCard" class="box-card edit-card">
          <template #header>
            <div class="card-header">
              <span>修改账户</span>
              <el-button type="primary" round @click="updateAccount(account.username,account)">提交</el-button>
            </div>
          </template>
          <el-form :model="account" label-width="100px">
          <el-form-item label="电话">
            <el-input v-model="account.phone" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="account.email" />
          </el-form-item>
          <el-form-item label="姓">
            <el-input v-model="account.firstName" />
          </el-form-item>
          <el-form-item label="名">
            <el-input v-model="account.lastName" />
          </el-form-item>
          <el-form-item label="地址1">
            <el-input v-model="account.address1" />
          </el-form-item>
          <el-form-item label="地址2">
            <el-input v-model="account.address2" />
          </el-form-item>
          <el-form-item label="国家">
            <el-input v-model="account.country" />
          </el-form-item>
          <el-form-item label="州">
            <el-input v-model="account.state" />
          </el-form-item>
          <el-form-item label="城市">
            <el-input v-model="account.city" />
          </el-form-item>
          <el-form-item label="偏好语言">
            <el-input v-model="account.languagePreference" />
          </el-form-item>
          <el-form-item label="zip">
            <el-input v-model="account.zip" />
          </el-form-item>
          </el-form>
        </el-card>
      </transition>
    </el-col>
  </el-row>
</div>
<bottom />
</template>

<style scoped>
.card-container {
  height: calc(100vh - 200px);
  overflow: auto;
}
.card-container::-webkit-scrollbar {
  width: 0.5em;
}

.card-container::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.card-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

.card-container::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 400px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
